<template>
	<uni-popup ref="popupDialog" type="bottom">
		<view class="popup-bd">
			<view class="popup-title">
				选择紧急度
				<uni-icons
					type="closeempty"
					size="50rpx"
					color="#666666"
					class="popup-close"
					@click="close"
				></uni-icons>
			</view>
			<view class="popup-content">
				<view class="pt20 pb20 pl20 pr20">
					<view class="itemList">
						<view
							class="item"
							v-for="item in urgencyOptions"
							v-bind:key="item.value"
							@click="urgencyValue = item.value"
						>
							{{ item.label }}
							<uni-icons
								v-if="item.value === urgencyValue"
								type="checkmarkempty"
								size="20"
								color="#3A74FC"
							></uni-icons>
						</view>
						<view class="item">
							自定义完成时间
							<uni-datetime-picker
								:border="false"
								class="date-picker"
								type="datetime"
								:clear-icon="false"
								:value="getPickerValue()"
								@change="changeLog"
							/>
						</view>
					</view>
				</view>
				<view class="pt20"
					><button
						class="primary-button linear w60"
						@click="complete"
					>
						确 定
					</button></view
				>
			</view>
		</view>
	</uni-popup>
</template>
<script>
import { urgencyOptions, getUrgencyOptionItem } from '../schedule/config'
const dayjs = require('@/common/dayjs.min.js')
import { handleFormatDayjs } from '@/common/date'
export default {
	emits: ['complete'],
	data() {
		return {
			urgencyOptions,
			urgencyValue: '',
		}
	},
	methods: {
		open(value) {
			this.$refs.popupDialog.open()
			this.urgencyValue = value
		},
		complete() {
			this.$emit('complete', { value: this.urgencyValue })
			this.$refs.popupDialog.close()
		},
		close() {
			this.$refs.popupDialog.close()
		},
		changeLog(values) {
			console.log('changeLog====>', values)
			this.urgencyValue = handleFormatDayjs(
				dayjs(values),
				'YYYY-MM-DD HH:mm:ss'
			)
		},
		getPickerValue() {
			const item = getUrgencyOptionItem(this.urgencyValue)
			return item ? undefined : this.urgencyValue
		},
	},
}
</script>
<style lang="scss" scoped>
.itemList {
	display: flex;
	flex-direction: column;
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 100rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #eeeeee;
		overflow: hidden;
	}
}
.popup-title {
	background: linear-gradient(90deg, #e3edff 0%, rgba(223, 234, 255, 0) 100%);
}
</style>
